<template>
    <div>
        <h1 style="text-align: center">施工清单维护</h1>
        <div class="topbox">
            <h3 style="margin-left: 20px">基本信息</h3>
            <el-form :model="Maintenance" inline label-position="top" label-width="200px"   >
                <el-form-item label="设置时间:"  class="item">
                    <el-input v-model="Maintenance.m_date" type="date"></el-input>
                </el-form-item>
                <el-form-item label="维护编号"  class="item">
                    <el-input v-model="Maintenance.id" readonly placeholder="添加后自动生成"></el-input>
                </el-form-item>
                <el-form-item label="维护主题"  class="item"	>
                    <el-input v-model="Maintenance.m_subject"></el-input>
                </el-form-item>
                <el-form-item label="所属项目"  class="item">
                    <el-input v-model="Maintenance.type_name" @focus="CheckProjectName"></el-input>
                </el-form-item>
                <el-form-item label="维护人" class="item">
                    <el-input v-model="Maintenance.maintainer"></el-input>
                </el-form-item>
                <el-form-item label="附件" class="item">
                    <el-upload
                            name="multipartfile"
                            action="http://localhost/upload"
                            :headers="{token:this.$store.state.token}"
                            :data="{folder:'Maintenance'}"
                            class="upload-demo"
                            ref="upload"
                            :limit="1"
                            :multiple="false"
                            :auto-upload="false"
                            :on-success="handleUploadSuccess">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    </el-upload>
                </el-form-item >
            </el-form>
            <el-dialog :visible.sync="projectTableVisible">
                <project-info-list v-on:row="row" v-if="projectTableVisible"></project-info-list>
            </el-dialog>
        </div>
        <div style="margin-top: 50px">
            <el-button @click="add">新增</el-button>
            <el-button @click="onsubmit">提交计划</el-button>
            <el-button @click="del">删除一行</el-button>
            <el-form >
                <el-table :data="Maintenances">
                    <el-table-column >
                        <template slot="header">
                            <p>施工清单编号<span style="color: red; font-size: 16px">*</span></p>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input
                                        v-model="scope.row.maintain_id" :placeholder="Maintenance.output_id" readonly
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot="header">
                            <p>施工工序名称<span style="color: red; font-size: 16px">*</span></p>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input v-model="scope.row.build_name"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot="header">
                            <p>预计工程量<span style="color: red; font-size: 16px">*</span></p>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input v-model="scope.row.tasks_count"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot="header">
                            <p>备注<span style="color: red; font-size: 16px">*</span></p>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input
                                        v-model.number="scope.row.comment"
                                        type="number"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </div>
    </div>
</template>

<script>
    import ProjectInfoList from '../common/projectInfo/ProjectInfoList.vue';
    import {ConstructionMaintenanceService} from '../../model/ww/ConstructionMaintenanceService.js'
    const constructionMaintenanceService=ConstructionMaintenanceService.getInstance()

    export default {
        name: "Output",
        data(){
            return {
                Maintenance:{
                } , //进度对象
                projectTableVisible:false, //弹出框状态
                Maintenances:[], //进度明细
            }
        },
        methods:{
            CheckProjectName(){
                this.projectTableVisible = true;
            },
            row(row){
                this.projectTableVisible=false
                this.Maintenance.type_name=row.projectName
                this.Maintenance.p_id=row.id

            },
            handleUploadSuccess(response){
               this.Maintenance.attach_ids=response.data
            },
            submitUpload(){
                this.$refs.upload.submit();
            },
            add() {
                this.Maintenances.push({
                    build_no:null,
                    maintain_id:'',
                    build_name:'',
                    tasks_count:'',
                    comment:'',
                });
                this.Maintenances.forEach(i=>{
                    i.maintain_id=this.Maintenance.id
                })
            },
            del(index) {
                this.ProgressDetails.splice(index, 1);
            },

            onsubmit(){
                //提交计划
                constructionMaintenanceService.save(this.Maintenance).then(()=>{
                })
                //提交子目清单

                constructionMaintenanceService.saveBeach(this.Maintenances)
                this.$message("添加成功")
            }

        }
        ,
        components:{
            ProjectInfoList
        },
        created(){
            this.Maintenance.maintainer=sessionStorage.getItem("realName")
            var time=new Date();
            var date=(time.getMonth()+1)+"-"+time.getDate()+"-"+time.getHours()+"-"+time.getSeconds()
            this.Maintenance.id=(date.replaceAll("-","")-0)
        }
    }
</script>

<style scoped>
    .topbox{
        width: 1500px;
        margin-top: 20px;
    }
    .item{
        width: 300px;
        margin-left: 50px;
        margin-top: 20px;
    }
</style>